<template>
  <div>
    <el-menu v-bind="{ ...menuConfig }" :collapse="globalStore.isCollapse">
      <AppSubMenu :routers="renderRouters"></AppSubMenu>
    </el-menu>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouterAsMenu } from "@/config";
import { menuRouter } from "@/router/modules/staticRouter";
import { mergeRouters, sortRouters } from "@/router/helper/utils";
import { useGlobalStore } from "@/store/modules/global";

/* components */
import AppSubMenu from "./subMenu.vue";

const globalStore = useGlobalStore();

let renderRouters = reactive([]);
if (useRouterAsMenu) {
  const mergeArr = mergeRouters(menuRouter);
  const sortArr = sortRouters(mergeArr);
  renderRouters = reactive(sortArr);
  console.log("renderRouters", renderRouters);
}

// 菜单配置
const menuConfig = reactive({
  mode: "vertical",
  // collapse: false,
  // ellipsis: true,
  // ellipsisIcon: '',
  // popperOffset: 6,
  // backgroundColor: '#fff', // 已被废弃，使用--bg-color
  // textColor: '#303133', // 已被废弃，使用--text-color
  // activeTextColor: '#409EFF', // 已被废弃，使用--active-color
  defaultActive: "", // 页面加载时默认激活菜单的 index
  // defaultOpeneds: [], // 默认打开的 sub-menu 的 index 的数组
  uniqueOpened: true, // 是否只保持一个子菜单的展开
  // menuTrigger: 'hover', // 子菜单打开的触发方式，只在 mode 为 horizontal 时有效。
  // router: false, // 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。
  collapseTransition: true, // 是否开启折叠动画
  popperEffect: "dark", // Tooltip 主题，内置了 dark / light 两种主题
  closeOnClickOutside: false, // 可选，单击外部时是否折叠菜单
});
</script>
<style lang="scss" scoped>
/* ::v-deep .el-menu {
  border-right-width: 0px;
} */
:deep(.el-menu) {
  border-right-width: 0px;
}
</style>
